<template>
  <el-dialog v-model="showDialog" title="新增员工">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="员工昵称" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入员工昵称" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属部门" prop="deptId">
            <el-cascader v-model="form.depId"></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="员工名称" prop="staffName">
            <el-input v-model="form.staffName" placeholder="请输入员工名称" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工性别">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option
                v-for="dict in sexOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选择性别">
              <el-option
                v-for="dict in stateOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位">
            <el-select v-model="form.postId" placeholder="请选择岗位">
              <el-option
                v-for="item in postOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="showDialog = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { computed, reactive } from 'vue';

const emit = defineEmits(['update:addStaffDialog']);
const props = defineProps({
  addStaffDialog: {
    type: Boolean,
    default: false,
  },
});

const showDialog = computed({
  get() {
    return props.addStaffDialog;
  },
  set(v) {
    emit('update:addStaffDialog', v);
  },
});
const sexOptions = [
  {
    label: '男',
    value: '0',
  },
  {
    label: '女',
    value: '1',
  },
];
const stateOptions = [
  {
    label: '未转正',
    value: '0',
  },
  {
    label: '已转正',
    value: '1',
  },
];

const postOptions = [
  {
    label: '前端',
    id: '1',
  },
  {
    label: '后端',
    id: '2',
  },
];

const form = reactive({
  nickName: '',
  depId: '',
  phoneNumber: '',
  email: '',
  staffName: '',
  sex: '',
  state: '',
  postId: '',
});
</script>

<style scoped lang="less"></style>
